<template>
  <div id="dbtm_pick" style="position:fixed; bottom: 36px; right: 60px; width:300px; height:60px;
background-color:#00000070;z-index:999999; padding: 0 4px; box-shadow: 0px 0px 5px 1px #ddd;">
    <div class="layui-row" style="position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    padding: 0 10px;">
      <div class="layui-col-md4 ">
        <label class="btn btn-primary">
          <input type="checkbox" id="dbtm-check" @click="handleChange"> 地表透明
        </label>
      </div>
      <div class="layui-col-md6 layui-col-md-offset2">
        <div id="ID-slider-demo"></div>
      </div>
    </div>
  </div>
</template>

<script>
let underObj = null
let slider = null
let sliderValue = 100
export default {
  name: "globeAlpha",
  components: {},
  data() {
    return {};
  },
  mounted() {
    slider = layui.slider;
    // 渲染
    slider.render({
      elem: '#ID-slider-demo',
      value: sliderValue,
      min: 0,
      max: 100,
      step: 1,
      setTips: function (value) {
        return value / 100;
      },
      done: function (value) {
        sliderValue = value / 100;
        if (underObj) {
          underObj.alpha = value / 100;
        }
      },
    });
  },
  methods: {
    handleChange(e) {
      if (e.target.checked) {
        if (!underObj) {
          underObj = new dadi.analysi.Underground(window.viewer, {
            alpha: sliderValue,
            enable: true,
          });
        }

        // 地表透明
        underObj.enable = true;
        underObj.alpha = sliderValue;
      } else {
        underObj.enable = false;
      }
    }
  },
  watch: {},
  computed: {},
  beforeDestroy() {

  },
}
</script>

<style scoped>
.main-globeAlpha {
  position: relative;
  height: 100%;
  width: 100%;
}
</style>
